<template>
  <div :style="newStyle">
    <span v-if="$attrs.onlyShow">{{modelValue}}</span>
    <el-date-picker
      v-else
      v-model="formValue"
      v-bind="compatibleConfig"
      @blur="onBlur"
      @focus="onFocus"
      @change="onChange"
      @clear="onClear"
      style="width:100%"
    />
  </div>
</template>

<script>
import { getDateText } from "../../../utils";
import { comMixin } from "../../../utils/comMixins";
import { deepClone } from "@/components/formGenerator/utils";

export default {
  mixins: [comMixin],
  name: "form-date-picker",
  model: {
    prop: "modelValue", // 绑定的值，通过父组件传递
    event: "update",
  },
  props: ["modelValue"],
  computed: {
    formValue: {
      get() {
        return this.modelValue;
      },
      set(val) {
        this.$emit("update:modelValue", val);
      },
    },
    compatibleConfig() {
      const config = deepClone(this.$attrs);
      config.format = config.format.replace('yyyy','YYYY').replace('dd','DD');
      config.valueFormat = config.valueFormat.replace('yyyy','YYYY').replace('dd','DD');
      return config;
    }
  },
  methods: { getDateText },
};
</script>

<style lang="scss" scoped>
</style>